<template>
  <div class="login">
    <a-layout id="components-layout-demo-fixed">
      <a-layout-header :style="{ position: 'fixed', zIndex: 1, width: '100%' }">
        <div class="logo">
          <img src="~assets/img/logo.png" alt="" />
        </div>
      </a-layout-header>
      <a-layout-content :style="{ padding: '0 50px', marginTop: '64px' }">
        <div
          :style="{
            background: '#fff',
            padding: '40px',
            minHeight: 'calc(100vh - 65px)',
          }"
        >
          <el-card>
            <h2 class="title">管理员登录</h2>
            <el-form
              :model="loginForm"
              status-icon
              :rules="rules"
              ref="loginForm"
              label-width="50px"
              class="loginForm"
            >
              <el-form-item label="账号" prop="account">
                <el-input
                  type="account"
                  placeholder="请输入管理员账号"
                  v-model="loginForm.account"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input
                  type="password"
                  placeholder="请输入密码"
                  v-model="loginForm.password"
                  autocomplete="off"
                  show-password
                ></el-input>
              </el-form-item>

              <!--按钮-->
              <el-form-item>
                <el-button type="primary" @click="submitForm('loginForm')"
                  >登录</el-button
                >
                <el-button @click="resetForm('loginForm')">重置</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </div>
      </a-layout-content>
      <a-layout-footer :style="{ textAlign: 'center' }">
        Ant Design ©2018 Created by Ant UED
      </a-layout-footer>
    </a-layout>
  </div>
</template>

<script>
import { login } from "../../network/admin";
export default {
  name: "Login",
  data() {
    // 正则匹配方法
    let validateAccount = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("账号不能为空"));
      } else {
        callback();
      }
    };
    let validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("密码不能为空"));
      } else {
        callback();
      }
    };
    return {
      loginForm: {
        account: "",
        password: "",
      },
      // 匹配规则
      rules: {
        account: [{ validator: validateAccount, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
      },
    };
  },
  methods: {
    /*
      提交、重置表单
       */
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 登录接口
          console.log(this.loginForm);
          login(this.loginForm)
            .then((res) => {
              console.log(res);
              if (res.data.code === 200) {
                this.$router.push({ path: "/main" });
                this.$notification.open({
                  message: "登录成功",
                  description: "欢迎进入求职小助手-后台管理系统！！",
                  onClick: () => {
                    console.log("Notification Clicked!");
                  },
                });
              }
            })
            .catch((err) => {
              this.$notification.open({
                message: "登录出错",
                description: "您的账号或者密码有误，请重新输入",
                onClick: () => {
                  console.log("Notification Clicked!");
                },
              });
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
#components-layout-demo-fixed .logo {
  width: 120px;
  height: 31px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px 24px 16px 0;
  float: left;
  text-align: center;
  line-height: 31px;
  img {
    width: 58px;
    height: 20px;
  }
}

.el-card {
  width: 600px;
  margin: 100px auto 0;
  padding: 20px;
}

.title {
  padding-bottom: 25px;
  text-align: center;
  font-size: 24px;
  color: #002766;
}

/deep/.el-card .el-card__body {
  padding: 30px 30px 40px 30px;
}

/deep/.loginForm .el-button--primary {
  margin-right: 10px;
  background-color: #4361a7;
  border-color: #4361a7;
  color: #fff;
}

/deep/.loginForm .el-button--primary:hover {
  background-color: #5177ce;
  border-color: #5177ce;
  color: #fff;
}
</style>
